<template>
  <div id="list">
    <ul class="list_user" ref="listuser" @touchmove="bMove = true">
      <li v-for="item in userData">
        <p>{{ item.index }}</p>
        <ul>
          <li
            class="list_user_li"
            @touchend="showtel(user.name)"
            v-for="user in item.users"
          >
            <img :src="user.img" alt="" />
            <span ref="list_user_li">{{ user.name }}</span>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="list_index" ref="listIndex">
      <li @touchstart="setScroll" v-for="item in userIndex">{{ item }}</li>
    </ul>
    <i class="listTop_img">︿</i>
    <i class="listBottom_img">﹀</i>
    <detail
      :userdatils="userdatil"
      :show="shows"
      @changeComponent1Data="showbox"
      v-if="shows" :userData="userData"
    />
  </div>
</template>

<script>
import detail from "@/components/detail";
import "@/assets/css/list.css";
export default {
  name: "list",
  components: {
    detail,
  },
  props: {
    userData: {
      type: Array,
    },
  },
  data() {
    return {
      shows: false,
      userdatil: [],
    };
  },
  computed: {
    userIndex: function () {
      return this.filterIndex(this.userData);
    },
  },
  methods: {
    filterIndex: function (data) {
      var result = [];
      for (var i = 0; i < data.length; i++) {
        if (data[i].index) {
          result.push(data[i].index);
        }
      }
      return result;
    },
    setScroll: function (ev) {
      var ap = this.$refs.listuser.getElementsByTagName("p");
      for (var i = 0; i < ap.length; i++) {
        if (ap[i].innerHTML == ev.target.innerHTML) {
          document.body.scrollTop = ap[i].offsetTop;
          document.documentElement.scrollTop = ap[i].offsetTop;
          window.scrollTop = ap[i].offsetTop;
        }
      }
    },
    tables: function (search) {
      var newArr = [];
      for (var i = 0; i < this.userData.length; i++) {
        var index = this.userData[i].index;
        var item = this.userData[i].users;
        var info = item.filter((theItem) => {
          return theItem.name.includes(search);
        });
        if (info.length != 0) {
          var obj = {
            index: index,
            users: info,
            i: i,
          };
          newArr.push(obj);
        }
      }
      return newArr;
    },
    showtel: function (data, ev) {
      this.shows = true;
      this.tables(data);
      this.userdatil = this.tables(data);
    },
    showbox(params) {
      this.shows = params;
    },
  },
};
</script>

<style scoped>
</style>